<template>
  <div class="allRecomment">
    <transition name="fadeIn">
      <msg :msgWay="msgWay" :text="text" v-if="showMsg"></msg>
    </transition>
    <recomment-item
      v-for="item in recomment"
      :key="item.id"
      :content="item.content"
      :goodNum="item.goodNum"
      :time="parseInt(item.time)"
      :username="item.realname"
      :avatar="item.avatar"
      :id="item.id"
      @callUser="callUser"
      @delRecomment="delRecomment"
      @researchRecomment="researchRecomment"
    ></recomment-item>
    <transition name="fadeFast">
      <div class="addContent" v-if="showRecomment">
      <div>
        <img :src="avatar" alt />
      </div>
      <textarea
        :disabled="isLogin"
        :class="{addBorder:isBorder}"
        :placeholder="recommentUser"
        @focus="addBorder"
        @blur="delBorder"
        v-model="newRecomment"
      ></textarea>
      <div class="submitBox">
        <button @click="submitRecomment">添加</button>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import recommentItem from "./recommentItem";
import msg from "../../components/msg"
import Bus from "../../bus"
export default {
  components: {
    recommentItem,
    msg
  },
  props: ["commentId"],
  created() {
    this.searchAllRecomment();
    Bus.$on("finishChange",msg=>{
      if(msg==="success"){
      this.researchRecomment()
        
      }      
    })
  },
  data() {
    return {
      showMsg: false,
      msgWay: "error",
      text: "删除成功",
      isBorder: false,
      recomment: [],
      newRecomment: "",
      recommentUser:"",
      showRecomment:false,
      avatar: this.$store.getters.user.avatar,
      flag:true
    };
  },
  computed: {
    isLogin(){
      if(localStorage.LoginToken){
        return false
      }else{
        return true
      }
    }
  },
  methods: {
    
    delRecomment(status) {
      this.showMsg = true;
      this.msgWay = status;
      setTimeout(() => {
        this.showMsg = false;
      }, 2000);
      status == "success" ? (this.text = "删除成功") : (this.text = "删除失败");
      this.getAllRemark();
    },
    researchRecomment(){
      this.searchAllRecomment()
    },
    callUser(username){
      this.showRecomment=!this.showRecomment
      this.recommentUser="@"+username
    },
    addBorder() {
      this.isBorder = true;
    },
    delBorder() {
      this.isBorder = false;
    },
    searchAllRecomment() {
      this.$axios
        .get("/recomment/search", {
          params: {
            blogId: this.$route.params.id,
            commentId: this.commentId,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            console.log(res.data.data);
            
            this.recomment = res.data.data;
          }else{
            this.recomment=[]
          }
        });
    },
    submitRecomment() {
      if(this.flag){
        this.flag=false
        if(this.newRecomment!==""){
        this.$axios
        .post("/recomment/add", {
          username: this.$store.getters.user.username,
          content: this.newRecomment,
          blogId: this.$route.params.id,
          realname: this.$store.getters.user.realname,
          commentId: this.commentId,
          avatar: this.$store.getters.user.avatar
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.searchAllRecomment();
            this.newRecomment=""
            this.showRecomment=false
            setTimeout(() => {
              this.flag=true
            }, 200);
          }
        });
      }else{

        this.msgWay = "warn";
        setTimeout(() => {
          this.showMsg = false;
        }, 2000);
        setTimeout(() => {
              this.flag=true
            }, 200);
        this.showMsg = true;
        this.newRemark = "";
        this.text = "请填写内容";
      }
      }
    },
  },
  beforeDestroy() {
    Bus.$off("finishChange")
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
@media screen and(min-width:765px) {
  .allRecomment{
  .addContent{
    display: flex;
    div{
      margin: 0 25px;
      img{
      width: 50px;
      height: 50px;
      border-radius: 50px;
      margin-top: 5px;
    }
    button {
        outline: none;
        border: 1px solid #333;
        width: 70px;
        height: 30px;
        border-radius: 15px;
        transition: all 0.4s;
        margin-top: 15px;
        &:hover {
          background-color: aqua;
        }
      }
    }
    textarea {
      border-radius: 10px;
      box-sizing: border-box;
      font-size: 15px;
      resize: none;
      width: 100%;
      height: 70px;
      padding: 7px 10px;
    }
    
  }
}
}
@media screen and(max-width: 765px) {
  .allRecomment{
  .addContent{
    margin-top: 5px;

    div{
      img{
      display: none;
    }
    button {
        outline: none;
        border: 1px solid #333;
        width: 70px;
        height: 30px;
        border-radius: 15px;
        transition: all 0.4s;
        margin-top: 5px;
        &:active {
          background-color: aqua;
        }
      }
    }
    textarea {
      border-radius: 10px;
      box-sizing: border-box;
      font-size: 15px;
      resize: none;
      width: 100%;
      height: 70px;
      padding: 7px 10px;
    }
    
  }
}
}
.addBorder {
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}
</style>